import React, { memo, useCallback } from 'react'
import { NavBarWrapper } from './style'
import { NavLink } from 'react-router-dom'
import { Row, Col, Input } from 'antd'
import { withRouter } from 'react-router-dom'
import { scrollAnimation } from '@/utils/scroll'
import {
  ThunderboltOutlined,
  TagsOutlined,
  TeamOutlined,
  BlockOutlined,
  SmileOutlined,
  ForkOutlined
} from '@ant-design/icons'

const { Search } = Input

function B_NavBar(props) {
  const { userId } = props

  const onSearch = (e) => {
    console.log(e)
  }

  const navHandler = useCallback(() => {
    scrollAnimation(window.scrollY, window.innerHeight - 20)
  }, [])

  return (
    <NavBarWrapper>
      <Row className="px-3">
        <Col
          lg={{ span: 12, offset: 3 }}
          md={{ span: 16, offset: 1 }}
          sm={{ span: 24 }}
          xs={{ span: 24 }}
        >
          <ul className="pt-3 flex-evenly">
            <li>
              <NavLink
                onClick={navHandler}
                to={`/blog/home/u/${userId}`}
                className="item"
                alt="首页"
                title="首页"
              >
                <ThunderboltOutlined
                  className="b-nav-icon"
                  style={{ fontSize: '23px', color: 'whitesmoke' }}
                />
                <span className="text color-white ml-1 fs-3">首页</span>
              </NavLink>
            </li>
            <li>
              <NavLink
                onClick={navHandler}
                to={`/blog/archives/u/${userId}`}
                className="item"
                alt="归档"
                title="归档"
              >
                <TagsOutlined
                  className="b-nav-icon"
                  style={{ fontSize: '23px', color: 'whitesmoke' }}
                />
                <span className="text color-white ml-1 fs-3">归档</span>
              </NavLink>
            </li>
            <li>
              <NavLink
                onClick={navHandler}
                to={`/blog/friends/u/${userId}`}
                className="item"
                alt="后宫"
                title="后宫"
              >
                <TeamOutlined
                  className="b-nav-icon"
                  style={{ fontSize: '23px', color: 'whitesmoke' }}
                />
                <span className="text color-white ml-1 fs-3">后宫</span>
              </NavLink>
            </li>
            <li>
              <NavLink
                onClick={navHandler}
                to={`/blog/wall/u/${userId}`}
                className="item"
                alt="衣柜"
                title="衣柜"
              >
                <BlockOutlined
                  className="b-nav-icon"
                  style={{ fontSize: '23px', color: 'whitesmoke' }}
                />
                <span className="text color-white ml-1 fs-3">衣柜</span>
              </NavLink>
            </li>
            <li>
              <NavLink
                onClick={navHandler}
                to={`/blog/profile/u/${userId}`}
                className="item"
                alt="关于我"
                title="关于我"
              >
                <SmileOutlined
                  className="b-nav-icon"
                  style={{ fontSize: '23px', color: 'whitesmoke' }}
                />
                <span className="text color-white ml-1 fs-3">关于我</span>
              </NavLink>
            </li>
            <li>
              <NavLink
                to={`/login`}
                className="item"
                alt="加入"
                title="加入我们"
              >
                <ForkOutlined
                  className="b-nav-icon"
                  style={{ fontSize: '23px', color: 'whitesmoke' }}
                />
                <span className="text color-white ml-1 fs-3">加入</span>
              </NavLink>
            </li>
          </ul>
        </Col>
        <Col
          lg={{ span: 6, offset: 3 }}
          md={{ span: 6, offset: 1 }}
          sm={{ span: 0 }}
          xs={{ span: 0 }}
        >
          <Search
            placeholder="输入点什么呢(*╹▽╹*)"
            allowClear
            size="middle"
            onSearch={onSearch}
            className="pt-6"
            bordered={false}
            style={{ width: 230 }}
          />
        </Col>
      </Row>
    </NavBarWrapper>
  )
}

export default memo(withRouter(B_NavBar))
